<template>
  <div class="home-page">
    <div class="charts-top">
      <div class="pie-chart">
        <div id="echarts-pie" class="echarts-pie" :style="{ width: '600px', height: '400px' }"></div>
      </div>
      <div class="pie-chart">
        <div id="echarts-pie-2" class="echarts-pie" :style="{ width: '600px', height: '400px' }"></div>
      </div>
    </div>

    <div class="line-chart">
      <div id="echarts" ref="container" class="echarts" :style="{ width: '100%', height: '400px' }" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import './style.less'

export default {
  name: 'homePage',
  data() {
    return {
      mChart: null,
      pieChart: null,
      pie2Chart: null,
      chartOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: 80,
          right: 80,
          top: 80,
          bottom: 80
        },
        legend: {
          show: true,
          right: '10%',
          data: ['点击量', '使用人数', '论文数目']
        },
        xAxis: {
          type: 'category',
          data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
          axisLabel: {
            interval: 0, // 强制显示所有标签
            rotate: 45
          },
          // 取消x轴的刻度
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name: '数目(个)',
          nameTextStyle: {
            color: '#aaa',
            nameLocation: 'start'
          }
        },
        series: [
          {
            name: '点击量',
            type: 'line',
            stack: 'up',
            data: [820, 932, 301, 1434, 1290, 1330, 1320, 760, 880]
          },
          {
            name: '使用人数',
            type: 'line',
            stack: 'down',
            data: [620, 732, 941, 834, 1690, 1030, 920, 887, 649]
          },
          {
            name: '论文数目',
            type: 'bar',
            stack: 'store',
            data: [120, 232, 541, 597, 702, 643, 874, 1003, 1467]
          }
        ]
      },
      pieChartOption: {
        title: {
          text: '用户数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '人员数量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 649, name: '用户数量' },
              { value: 166, name: '教师数量' },
              { value: 483, name: '学生数量' },
              { value: 599, name: '普通用户数量' },
              { value: 50, name: '管理员数' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      pie2ChartOption: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '论文信息',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1467, name: '论文总数' },
              { value: 873, name: '已发布数量' },
              { value: 594, name: '已审批数量' }
            ]
          }
        ]
      },
      chartData: [],
      pieChartData: [],
      pie2ChartData: []
    }
  },
  watch: {
    // 监视当父组件传入charData发生变化时重新渲染图表
    chartData(newChartData) {
      if (newChartData.rows.length > 0) {
        const { rows, xAxisData } = newChartData
        const up = []
        const down = []
        const store = []
        const xAxis = { data: xAxisData }
        rows.forEach(item => {
          up.push(item.up)
          down.push(item.down)
          store.push(item.store)
        })
        const series = [{ data: up }, { data: down }, { data: store }]
        this.mChart.setOption({ xAxis, series })
      }
    }
  },
  mounted() {
    this.initChart();
    this.initPieChart();
    this.initPie2Chart();
  },
  beforeDestroy() {
    // 销毁图表实例
    if (!this.mChart) return
    this.mChart.dispose()
    this.mChart = null
  },
  methods: {
    // 初始化图表
    initChart() {
      const {
        chartOption
      } = this
      this.mChart = echarts.init(document.getElementById('echarts'))
      this.mChart.setOption(chartOption)
    },
    initPieChart() {
      const {
        pieChartOption
      } = this
      this.pieChart = echarts.init(document.getElementById('echarts-pie'))
      this.pieChart.setOption(pieChartOption)
    },
    initPie2Chart() {
      const {
        pie2ChartOption
      } = this
      this.pie2Chart = echarts.init(document.getElementById('echarts-pie-2'))
      this.pie2Chart.setOption(pie2ChartOption)
    }

  }
}
</script>